jQuery
2
3
Web
Java Script
WebServer
AJAX
Web
Java Script
Java Script
Java Script
jQuery
jQueryJava Script
Web
John Resig
Java script
jQuery
GoogleMozillaWordPressDrupalDELL
Microsoft
4
ASP.NET 4
Visual Studio 2010
Java Script
jQueryjQueryWeb 2
jQuery
IE6Firefox 2
Safari 3Opera 9Google chrome
HTML CSSJava script
5
jQuery
6
Queryj
jQuery
comjquerywww
Download
jsjquery
jquery-min.js
Web
<head><head/>
<script src”jQueryjs” type”textjavascript”>
<script>
java script
src
jQuery.js
7
jQuery.jsWeb
Queryj
jQuery
SelectorsFunctionsEvents
AnimationsPlugins
Java ScriptjQuery
Web
jQuery
Web
jQuery
Google
8
Google
9
Links
Fade in
jQuery
Fade inLinks
$(„a‟).fadeIn();
Microsoft
10
Flash
menustabsSlider
jQuery
Silverlight
GoogleMicrosoft
jQuery
Queryj
Java scriptjQuery
<html>
<head>
<scriptsrc”jQueryjs” type”textjavascript”>
11
<script>
<scripttype”textjavascript”>
$(document).ready(function(){
});
<script>
<head>
<body>
<body>
<html>
HTML
$(document).ready(function(){
});
jQuery
12
jQuery
jQuery
jQueryDOMData Object
Model
Dial up
DOM
DOM
jQuery
jQuery
jQuery
13
Selectors
14
Cascading Style Sheets
CSS
Web
p
p{fontsizemedium; }
a{ colorred;}
p,a{ fontfamilyTahoma,Arial; }
Mukhtar
Mukhtar img{ borderwidthmedium; }
ap
p,a.Mukhtar img CSS
SelectorsjQuerySelectors
WebHTML
jQuery
15
CSSjQuery
3CSSCSS 3
jQueryjQuery
jquery(„selector‟);
$(„selector‟);
Selector
$ jquery
jquery(selector)$(selector)
PHP
aa
$(„a‟);
16
jquery(„a‟);
img
$(„img‟);
jquery(„img‟);
aimg
td:has(img)
$(„td:has(img)‟);
jquery(„td:has(img)‟);
jQuery
<html>
<head>
<scriptsrc”jQueryjs” type”textjavascript”>
<script>
17
<scripttype”textjavascript”>
$(document).ready(function(){
$(„a‟);
$(„img‟);
$(„td:has(img)‟);
});
<script>
<head>
<body>
<body>
<html>
jQuery
18
$jquery
selector
array<element>Java Script
jQuery Wrapped Set
jQuery
$(„selector‟).function();
function
jQuery
jQuery Wrapped Set selector
$(„selector‟).hide();
selector$
hide
$‟selector‟.function1().function2();
19
function1
selectorfunction2
function1
function1function2
selector
$(‟selector‟).Q1().Q2().Q3(). … .Qn();
n
jQuery
$(„a‟).fadeOut().addClass(„red‟);
afadeOut
CSS Classred
class=”red”
jQuery
jQuery
<html>
<head>
<title></title>
20
<script src="jquery.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$(„#Button1‟).click(function() {
$(‘#TextArea1’).toggle(‘slow’);
})
});
</script>
</head>
<body>
<input id="Button1" type="button" value="
" />
<textarea id="TextArea1" name="S1"></textarea>
</body>
</html>
jQuery
$('#TextArea1').toggle('slow');
21
TextArea1
toggle
TextArea1#TextArea1
SetWrappedjQuery
Web
jQuery
$jqueryjQuery
Wrapped SetjQuery
Selector
Description
T
Tp
pa
aimgimg
C
C
22
“C”class
C1 C2 C3 … Cn
C1
C2
C3
Cn
#X
X
“X”id
T F
F
T
T>F
F
T
div>a
div
div
div a
div
TF
FT
23
ThasF
T
F
Table:has(a)
TA
TA
A
a[href]
href
TAvalue
TA
value
a[target=_blank]
TA^value
TA
value
de
a[href^=www.de]
TA$value
TA
valuea[href$=.mp3]
24
mp3
TAvalue
TA
valuea[href*=great]
great
selectorfirst
selector
a:first
div img:first
div
selectorlast
selector
selectorfirstchild
selector
div a:first-child
div
first
selectorlastchild
selector
25
selectoronlychild
selector
div
div
div a:only-child
selectornthchildn
n
selector
div
div a:nth-child(4)
selectornth
childeven
selector
selectornth
childodd
selector
selectornthchildXn
X
X
div a:nth-child(3n)
div
26
selectornth
childXnY
YX
YX
div a:nth-child(3n+2)
div
selectoreven
selector
selectorodd
selector
selectoreqn
n
selector
selectorqtn
n
selector
selectorltn
n
selector
27
animated
button
submit reset
button
checkbox
check boxes
checked
checked
check boxradio button
containss
s
p:contains(jQuery)
jQuery
YesyEsYES
disabled
enabled
file
input[type=”file”]
28
header
h1,h2,h3,h4,h5,h6
hidden
image
input[type=image]
input
input select
textareabutton
notselector
selector
:input:not(:button)
parent
password
input[type=password]
radio
radio button
reset
selected
selected
options
29
submit
text
input[type=text]
visible
Selector1,Selector2,
…,Selectorn
jQuery
jQuery
www.jquery.com
30
HTML
WebRich Internet Applications
HTML
commultiuploadwww
one more
file
one more file
Server
HTMLjQuery
31
HTML
$HTML
HTMLHTML
„<div>‟$div„<div><div/>‟$
script
jQuery
$(„<div> <div>‟).append(„#id‟);
idappend
32
3257
Functions
33
Functions
jQueryjQuery Wrapped Set
Attributes
<img src”imagespic1gif” alt”imageOne” title”image
one” width”40” height”20”>
Attributesheight
widthtitlealtsrc
Webnode
Properties
34
jQuery
attr
$(„#id‟).attr(„attributeName‟);
attributeNameid
attr
$(„#id‟).attr(„attributeName‟ , „value‟);
attributeNameid
value
#id
$(„selector‟).each(function(n){
$(this).attr(„attributeName‟);
)};
35
$(„selector‟).each(function(n){
$(this).attr(„attributeName‟ , „value‟);
)};
this
each
each
$(„selector‟).attr(JSON);
JSONJSON
$(„input‟).attr(
{ value„‟ , title„‟ }
);
„‟value
‘
’title
36
removeAttr
$‟#id‟removeAttr‟attributeName‟;
attributeName
removeAttr
$‟a‟removeAttr‟target‟;
target
JSONJava Script Object Notation
{
Key1„value1‟,
Key2„value2‟,
…,
Keyn„valuen‟
}
key1
value1
key2
value2
keyn
valuen
37
Styles
jQuery
CSS Class
addClass
$‟selector‟addClass‟className‟;
className
selector
space
<span class”class1 class2 class3 class4 … classn”> <span>
span
addClass
jQuery
removeClass
$(‟selector‟).removeClass(‟className‟);
38
className
selector
jQuery
toggleClass
$‟selector‟toggleClass‟className‟;
<html>
<head>
<title> <title>
<styletypetextcss>
.black {
backgroundcolorblack;
colorWhite;
}
<style>
<head>
<body>
39
<table id”table1”>
<tr>
<td><td>
<td><td>
<tr>
<tr>
<td> <td>
<td> <td>
<tr>
<tr>
<td> <td>
<td> <td>
<tr>
<tr>
<td> <td>
<td> <td>
<tr>
<tr>
<td> <td>
40
<td> <td>
<tr>
<table>
<body>
<html>
InternetWeb
Zebra
stripping
41
Web
<tableid”table1”>
<tr>
<td><td>
<td><td>
<tr>
<tr class”black”>
<td> <td>
<td> <td>
<tr>
<tr>
<td> <td>
<td> <td>
<tr>
<tr class”black”>
<td> <td>
<td> <td>
42
<tr>
<tr>
<td> <td>
<td> <td>
<tr>
<table>
jQuery
$‟#table1 tr‟toggleClass‟black‟;
$‟#table1 treven‟addClass‟black‟;
43
Classes
css
$‟#id‟css‟name‟;
name
id
$‟#id‟css‟name‟,‟value‟;
valuename
idattr
eacheach
$‟#id‟cssJSON;
JSON
selector
width
$‟#id‟width;
44
$‟#id‟widthvalue;
height
$‟#id‟height;
$‟#id‟heightvalue;
Inner content
jQueryWeb
html
$(‟#id‟).html();
HTMLid
$(‟#id‟).html(Con);
ConHTML
text
HTML
$‟#id‟text;
45
$‟#id‟textCon;
Con
htmltext
<ul id”myul”>
<li>1<li>
<li>2<li>
<ul>
text
$(„#myul‟).text();
12Stringhtml
<li>1<li>
<li>2<li>
append
HTML
$‟selector‟appendHTML;
46
$‟targetSelector‟append($(‟sourceSelector‟));
sourceSelectorHTML
sourceSelector
targetSelector
<ul>
<li>11<li>
<li id”item12”>12<li>
<ul>
<ol>
<li>21<li>
<ol>
47
$‟item12‟append$‟ol‟;
$‟ul li‟append$‟ol‟;
append
append appendTo
$‟source‟appendTo‟target‟;
source
target
$‟#copyrightLabel‟appendTo‟code‟;
48
copyrightLabel
codecode
copyrightLabel
append
appendTo
appendappendTo
prependprependTo
prependappendprependToappendTo
before()insertBefore()
after()
insertAfter()
49
append
$‟p img‟before‟<p>I love Syria<p>‟;
I love Syriap img
$‟<p>I love Syria<p>‟insertBefore‟p img‟;
$‟ahref^http://www‟after‟<small style ”colorred”>
external<small>‟;
external
$‟<small style”colorred”> external
<small>‟insertAfter‟ahref^http://www‟;
html
Parameter
50
HTML
text
html
String
append
appendTo
prepend
prependTo
before
51
insertBefore
after
insertAfter
Wrapping
imgaimga
p adiv
52
jQuerywrap
parameter
$‟selector‟wrap‟Wrapper‟;
selectorWrapper
jQuery
$‟img‟wrap‟<a href”#”><a>‟;
wrapAll
$‟selector‟wrapAll‟Wrapper‟;
Wrap
<html>
<head>
<script src="jquery.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('img[src]').wrap('<a href="#"></a>');
53
});
</script>
</head>
<body>
<img src="noPic.gif" alt="no Pic!" />
</body>
</html>
wrapInner
$‟selector‟wrapInner‟Wrapper‟;
54
jQueryremove
$(‟selector‟).remove();
selector
inner content
empty
$(‟selector‟).empty();
clone
beforeafterappend
divdiv
$(„#sourceDiv‟).clone().appendTo(„#targetDiv‟);
FORM ELEMENTS
FormsWeb
Web
W3Cjava script
jQuery
55
val
$(‟selector‟).val();
selector
selector
val
value
val
Multi-select elementval
$(‟#firstName‟).val();
valuefirstName
val
selectorWeb
valvalue
check boxradio button
56
selected
$(‟nameradioGroupselected‟).val();
val
$(‟selector‟).val(value);
valradio buttonscheck
boxes<select>selected
$(‟selector‟).val(values);
selector
values
selected
$‟input‟val([‟abokamal‟,‟jQuery‟,‟Mukhtar‟]);
selectedvalue
abokamaljQueryMukhtar
<html>
57
<head>
<script src="jquery.js" type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('*').val(['abokamal', 'jQuery']);
});
</script>
</head>
<body>
<select id="Select1">
<option value="X">Abokamal</option>
<option value="jQuery">jQuery</option>
<option>Mukhtar</option>
</select>
</body>
</html>
val
pluginForm Plugin
58
Events
59
Events
jQuery
Event
Web
ClickDouble click
Mouse move
Event
handling
Web
function
60
Web
Browsers
Web
Java ScriptjQuery
HTMLXHTML
Click
Link
onClick
onclickmouse Move
onmousemove focus
onfocus
jQuery
<html>
<head>
<scripttype”textjavascript”>
function myClickHandler(){
alert(“”);
61
};
function myMoveHandler(){
alert(“”);
};
<script>
<head>
<body>
<inputid”Button1” type”button” value””
onclick”myClickHandler()” >
<imgsrc”myPicgif” onmousemove”myMoveHandler()” >
<body>
<html>
onclick
java script
myClickHandler
onmousemove
62
jQuery
jQuery
jQuery
on
click click
onclick
mousemoveonmousemove
<html>
<head>
<scripttype”textjavascript” src”jqueryjs”>
</script>
<scripttype”textjavascript”>
$(document).ready(function(){
$(„#Button1‟).click(function(){
alert;
});
$(„img‟).mousemove(function(){
alert;
63
});
});
<script>
<head>
<body>
<inputid”Button1” type”button” value”” >
<imgsrc”myPicgif” >
<body>
<html>
jQuery
jQuery
64
load
unload
blur
lose
focusfocus
change
submit
focus
focus
Tab
select
<select>
65
scroll
textarea
keydown
keypress
keyup
click
dblclick
mousedown
mousemove
mouseout
66
mouseover
mouseup
error
resize
$(‟selector‟).event(function);
function event
selector
bind
$(„selector‟).bind(„event‟ , function);
67
event
function
jQuery
$(‟img‟).click(myFunction);
$(„img‟).bind(„click‟ , myFunction);
bind
$(„img‟).bind(„click‟,F1).bind(„click‟,F2).bind(„click‟,F
3);
F1F2F3
$(„img‟).click(F1).click(F2).click(F3);
bindunbind
bind
$(„img‟).bind(„click‟,Func1).bind(„click‟,Func2)
.bind(„click‟,Func3);
$(„img‟).unbind(„click‟,Func2);
68
Func3Func1
Func2unbind
jQuerybindone
bind
one
$(„img‟).one(“click , mousemove , dblclick”, „
myFunction‟);
myFunction click
mousemovedblclick
jQuery
evente
e
$(‟a‟).click(function(e){
Alert(“”);
});
e
e
69
click
$(„a‟).click(function (e){
alert(etype);
});
click
typeetypee
java script
jQuery
e
e
e
altKey
truealt
false
ctrlKey
truectrl
false
70
keyCode
keyupkeydown
ASCII
upper case
aA
pageX
X
pageY
Y
screenX
X
screenY
Y
relatedTarget
shiftKey
trueshift
71
false
type
which
ASCII
jQuery
preventDefaulte
$(„a‟).click(function(e){
epreventDefault();
};
72
7587
Animations
73
Animations
Microsoft
FlashjQuery
jQueryAnimations
showhide
$(„selector‟).show();
selector
$(„selector‟).hide();
selector
Tree Lists
<html>
<head>
<scriptsrc”jqueryjs” type”textjavascript”>
74
<script>
<scripttype”textjavascript”>
$(document).ready(function(){
$(„lihas(ol)‟).css(„curosr‟,‟pointer‟);
$(„lihas(ol)„).click(function(){
If($(this).children().is(„hidden‟))
$(this).children().show();
else
$(this).children().hide();
});
});
<script>
<head>
<bodydir”rtl”>
<fieldset>
<legend> <legend>
<ul>
<li><li>
<li>
<ol>
75
<li><li>
<li><li>
<li><li>
<li><li>
<li><li>
<ol>
<li>
<li><li>
<li>
<ol>
<li><li>
<li><li>
<li><li>
<ol>
<li>
<li><li>
<li><li>
<ul>
76
<fieldset>
<body>
<html>
Unordered listul
orederd list
ol
$(„lihas(ol)‟).css(„curosr‟,‟pointer‟);
olhasliliol
$(„lihas(ol)‟).click(function(){
if($(this).children().is(‟hidden‟))
$(this).children().show();
else
$(this).children().hide();
});
77
isjQuery
true
falsechildren
if($(this).children().is(‟hidden‟))
this
this
jQuery
toggle
$(‟selector‟).toggle();
selector
jQuery
$(„lihas(ol)„).click(function(){
$(this).children().toggle();
});
78
jQuery
showhidetoggle
$(„selector‟).show(speed);
$(„selector‟).hidespeed);
$(„selector‟).togglespeed);
speed
speed
„slow‟
„normal‟„fast‟
jQuery
$(„lihas(ol)„).click(function(){
79
$(this).children().toggle(1000);
});
$(„lihas(ol)„).click(function(){
$(this).children().toggle(„slow‟);
});
jQuery
showhidetoggle
$(‟selector‟).show(speed,F);
$(‟selector‟).hide(speed,F);
$(„selector‟).toggle(speed,F);
F
jQuery
Fade in
80
$(‟selector‟).fadeIn(speed,F);
speed
jQueryslow
normalfast
F
Optional parameter
fade out
$(„selector‟).fadeout(speed,F);
speed F
jQueryfadeTo
opacity
$(‟selector‟).fadeTo(speed,opacity,F);
speedF
opacity
81
fadeTofadeOut
jQuery
slide downslideDown
$(‟selector‟).slideDown(speed,F);
speedF
slide upslideUp
$(‟selector‟).slideUp(speed,F);
speedF
slideToggleslide Down
slide Up
$(‟selector‟).slideToggle(speed,F);
speedF
82
jQuerystop
$(‟selector‟).stop();
jQuery
show
hide
toggle
fadeIn
fadeOut
fadeTo
slideDown
slideUp
slideToggle
83
stop
jQuery
animate
$(‟selector‟).animate(properties,speed);
propertiesJSON
propertiesspeed
properties
height
opacitytopfontsize
showtogglehide
fadeToggle
$(‟selector‟).animate({opacity ‟toggle‟}, ‟slow‟);
84
speed slow
propertiesJSON
{opacity ‟toggle‟}
opacity
$(‟selector‟).animate(
{ width $(this).width() * 3 ,
height $(this).height() * 3 }
, „slow‟ );
JSON
speed
85
87110
AJAX
86
AJAXWeb
WebAJAX
AJAXAsynchronous Java Script And XML
WebServer
Web
jQuery
AJAXAJAX
ServerAJAX
87
jQuery
Serverload
$(‟selector‟).load(url,JSON,F);
url
JSON
F
load
SelectorServer
HTML
$(‟#divA‟).load(‟myPageaspx‟);
divA
aspxmyPage
HTML
$(‟#divA‟).load(„myPageaspx ahrefwwwawcom‟);
88
divA
comawwwwhrefa load
aspxmyPage
myPageaspx?p1v1&p2v2
$(‟#divA‟).load(‟myPageaspx‟, {p1‟v1‟, p2‟v2‟});
JSON
Internet Explorer
Cache
Cache
89
loadForms
serialize
aspxmyPage
myForm
$(‟#divA‟).load(‟myPageaspx‟, $(‟#myForm‟).serialize());
serializeJSONload
aspxmyPage
JSON
POST
GET
GET
jQueryGET
POSTget$
GET
$get(url,JSON,F);
90
url
JSON
F
jQuery
X$
X
get$
$get(
‟myPagephp‟,
{p1 „10‟ , p2 ‟cat‟},
Function(data){alert(data);}
);
myPagephp?p110&p2cat
data
91
POST
get$post$
POST
$post(url,JSON,F);
urlJSON
F
JSONjQuery
get$ JSON
getJSON$
$getJSON(url,JSON,F);
urlJSON
F
JSON
92
AJAXjQuery
getScript$java script
$getScript(url,F);
urlJava scriptF
AJAX
jQueryAJAX
AJAX
ajax$
$ajax(options);
optionsJSON
ajax$
url
type
GETPOST
93
data
JSON
JSON
dataType
XMLJSON
SCRIPTTEXT
timeout
success
error
complete
beforeSend
async
True
94
False
processData
data
Web
true
false
$ajax(
{
url „myPagejsp‟ ,
type „GET‟ ,
dataType „XML‟
}
);
jQuery
ajax$ajaxSetup$
95
$ajaxSetup(properties);
propertiesJSON
ajax$properties
ajax$
$ajaxSetup(
{
type „GET‟ ,
dataType „XML‟ ,
error function(err){
alert(„erro message is ‟ msg);
},
timeout 10000
}
);
AJAX
jQueryAJAX
AJAX
96
Events
ajaxComplete
AJAX
ajaxError
AJAX
ajaxSend
AJAX
ajaxStart
AJAX
ajaxStop
AJAX
ajaxSuccess
AJAX
WebjQuery
AJAX
97
Plugins
98
plugins
jQuery
plugins
comjqueryplugins
Java Script
jQuery
jQuery
Java ScriptWeb
99
nterfaceIjQuery user
Microsoft
Web
tabsscroll barsaccordions
sliders date pickers
color pickers
Themes
100
comjqueryuiwwwBuild Custom Download
Formjquery
Forms
jQuery
<select>
AJAX
http://www.jquerycompluginsprojectform
jmaxinput
Twitter
jQuery
101
http://pluginsjquerycomprojectjMaxInput
ort accessjquery sh
e
xjQuery
AJAX
http://pluginsjquerycomprojectshortaccesskey
jquery corner
Web
Round Corner
http://wwwmalsupcomjquerycorner
102
beauty tips
tooltip
http://wwwlullabotcomfilesbtbtlatestDEMOindexhtm
l
BOXY
Facebook
http://pluginsjquerycomprojectboxy
103
ajax fancy captcha
Bots jQuery
Bots
http://wwwwebdesignbeachcombeachbarajaxfancy
captchajqueryplugin
104
Gallerific
http://wwwtwospycomga
lleriffic
http://pluginsjquerycom
105
plugins
Java Script
js
plugin
jQuery
plugin
jsMukhtarjQuery
(function($){
})(jQuery);
106
(function($){
$F function(Parameters)
{
};
})(jQuery);
FParameters
(function($){
107
$fnF function(Parameters)
{
};
})(jQuery);
FParameters
(function($){
$ourMessage function(msg)
{
var mmsgtoString();
alert(m);
};
})(jQuery);
jQuery
108
$ourMessage(„Hello world „);
Arial
(function($){
$fnchangeFontfunction()
{
return thiscss(„fontfamily‟, „Arial‟);
};
})(jQuery);
cssjQuery
return
$(„#Mydiv‟).changeFont().fadeIn();
#Mydiv
109
each
(function($){
$fnchangeFont function(){
return thiseach(function(){
$(this).css(„fontfamily‟ , „arial‟);
});
};
})(jQuery);
mokhtar_ss@hotmail.com
110
JQUERY ..........................................................................................
jQuery ..............................
jQuery .........................................
........................................
jQuery ....................................
.....................................
SELECTORS................................................................................
.............................................
HTML ...................................
FUNCTIONS ....................................................................................
Functions .......................................
Attributes .......................
Styles ................................
Inner content ..................
Wrapping ....................................
...................................
FORM ELEMENTS ......................
111
EVENTS ........................................................................................
ANIMATIONS ..............................................................................
Animations .....................................
........................................
.........................................
.........................................
..........................................
..................................
.......................................
AJAX ................................................................
.....................................
.............................
GET ...................................
POST ..................................
............................
AJAX ...................................
AJAX .................................
PLUGINS ....................................................................................
112
plugins ......................................
jQuery user Interface ............................
FormjQuery ...................................
jmaxinput .....................................
jQuery short access .............................
jQuery corner ..................................
beauty tips ...................................
BOXY .........................................
AJAX fancy captcha ..............................
Gallerific ....................................
.....................................
plugins ...............................
.....................................
..................................
..................................
................................
.............................................
Web Technologies
o
HTML5 & CSS3
jQuery
3D Game Studio
F1-Magazine
o
facebook.com/mukhtar.ss
